<template>
  <div class="search">
    <div class="search-margin"></div>
    <div class="mysticky">
      <div class="search-header">
        <van-icon
          class="back"
          name="arrow-left"
          @click="$router.push('./searchbefore')"
        />
        <van-search
          class="vansearch"
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch(value, true)"
        >
          <template #action>
            <div @click="onSearch(value, true)">
              搜索
            </div>
          </template>
        </van-search>
      </div>

      <!-- <van-dropdown-menu>
        <van-dropdown-item v-model="state.value1" :options="option1" @change="onSearch(value, true,state.value1)"/>
        <van-dropdown-item v-model="state.value2" :options="option2" @change="onSearch(value, true,state.value2)"/>
    </van-dropdown-menu> -->
    </div>

    <!-- <product v-slot="{ product }" :list='list' @to-load="onSearch">
        <keep-alive>
            <component :is="product" />
        </keep-alive>
    </product> -->
    <product :list="list" @to-load="onSearch" />
  </div>
</template>
<script>
import { onMounted, reactive, toRefs, onActivated, onDeactivated } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetDSGoodsList } from "@/api/home";
import { getCookie } from "@/lib/ecapi";
import product from "../../components/home/product";
export default {
  components: { product },
  setup() {
    const option1 = [
      { text: "全部商品", value: "" },
      { text: "新款商品", value: 5 },
      { text: "活动商品", value: 1 },
    ];
    const option2 = [
      { text: "默认排序", value: "" },
      { text: "好评排序", value: "4" },
      { text: "销量排序", value: "3" },
    ];
    //''，默认：综合
    //1，价格降序
    //2，价格升序
    //3，销量
    //4，评论数
    //5，新品
    const data = reactive({
      value: "",
      list: {
        loading: false,
        finished: false,
        goods: [],
      },
      products: {
        ques: "", //搜索关键字（商品编码，条码，商品名）
        pageNum: 1, //页码
        pageSize: 20, //每页显示条目数
        Strclass: "", //分类ID
        Strlv: getCookie("MLV"), //等级ID（1会员，13plus，18店主） 不传默认1
      },
      state: {
        value1: "",
        value2: "",
      },
    });

    const route = useRoute();
    const { key } = route.query;
    const router = useRouter();
    const onSearch = async (value, updata, sort) => {
      //如果搜索内容变化
      if (updata) {
        data.value = value;
        data.products.ques = value;
        data.products.pageNum = 1;
        data.list.loading = true;
        data.list.goods = [];
        router.push({ path: "/search", query: { key: value } });
      }
      data.list.finished = false;
      const res = await GetDSGoodsList(data.products);
      if (data.Refresh) {
        data.list.goods = [];
        data.list.Refresh = false;
      }
      data.list.goods.push(...res[1]);
      data.list.loading = false;
      data.products.pageNum = data.products.pageNum + 1;
      if (res[1].length < data.products.pageSize) {
        data.list.finished = true;
      }
    };

    onMounted(() => {
      onSearch(key, true);
    });

    let scrollTop = 0;
    onActivated(() => {
      // document.getElementById("app").addEventListener("scroll", () => {
      // });
      if (data.value != route.query.key) {
        onSearch(route.query.key, true);
        return true;
      }

      document.getElementById("app").scrollTop = scrollTop;
    });
    onDeactivated(() => {
      scrollTop = document.getElementById("app").scrollTop;
    });

    return { ...toRefs(data), onSearch, option1, option2 };
  },
};
</script>
<style lang='scss' scoped>
.mysticky {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}
.search-margin {
  height: 5.2rem;
}
.search-header {
  display: flex;
  background: #fff;
  position: relative;
  z-index: 10;
  .vansearch {
    flex-grow: 1;
  }
  .back {
    line-height: 5.4rem;
    padding: 0 1rem;
    font-size: 1.8rem;
  }
}
</style>